<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link href="./../resources/css/default.css" rel="stylesheet" type="text/css" />
        <link href="./../resources/css/cssLayout.css" rel="stylesheet" type="text/css" />
        <title>Facelets Template</title>
        <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #mapi { height: 100% }
    </style>
    </h:head>

    <h:body>
        <h:form id="fo">  
 <div id="map_canvas" style="width:100%; height:100%">
            <p:gmap center="4.5968892,-74.1151401" zoom="13" type="ROADMAP" model="#{consultarSitios.mapa}" style="width:1200px;height:400px"
                    fitBounds="false"
                    id="mapi"
                     >  

                <p:ajax event="overlaySelect" listener="#{consultarSitios.onMarkerSelect}"  />  

                <p:gmapInfoWindow >  

                    <p:outputPanel deferred="true" deferredMode="visible" style="width:300px; height: 140px">
                        <h:outputText value="#{consultarSitios.esta.nombre}" style="font-weight:bold" />  
                    <br />  
                     <h:panelGrid columns="2" cellpadding="0"> 
                   
                        
                         <h:outputLabel  value="Dirección:" style="font-weight:bold"/>
                        <h:outputText value="#{consultarSitios.esta.direccion}" /> 
                        <h:outputLabel  value="Tel:" style="font-weight:bold"/>
                        <h:outputText value="#{consultarSitios.esta.telefono}" /> 
                        <h:outputLabel  value="Capacidad:" style="font-weight:bold"/>
                        <h:outputText value="#{consultarSitios.esta.capacidad}" /> 
                        <h:outputLabel  value="Disponible:" style="font-weight:bold"/>
                        <h:outputText value="#{consultarSitios.esta.disponible}" /> 
                         <h:outputLabel  value="Tarifa:" style="font-weight:bold"/>
                         <h:outputText value="#{consultarSitios.esta.tarifa}" /> 
                        <h:outputLabel  value="Horario:" style="font-weight:bold"/>
                        <h:outputText value="#{consultarSitios.esta.horario}" /> 
                         
                       
</h:panelGrid>  
                    </p:outputPanel>  
                </p:gmapInfoWindow>  
            </p:gmap>  
</div>
        </h:form>  

    </h:body>

</html>
